import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:qgchat/common/global/global.dart';
import 'package:qgchat/page/live/videoPage/live/BloC/dialogueBloC/index.dart';
import 'package:qgchat/page/live/videoPage/live/BloC/liveEmojiBloC/bloc.dart';
import 'package:qgchat/page/live/videoPage/live/model/videoText.dart';
import 'package:qgchat/states/states_model/index.dart';
import 'package:qgchat/widgets/emoji/emoji.dart';

///
/// 通话中输入框组件
///

class LiveInput extends StatefulWidget {
  LiveInput(this.targetToken, {Key key}) : super(key: key);

  final String targetToken;

  @override
  _LiveInputState createState() => _LiveInputState();
}

class _LiveInputState extends State<LiveInput> {
  final TextEditingController c = TextEditingController(); // 输入框控制器
  final FocusNode focus = FocusNode(); // 焦点控制

  // 发送文字
  send() {
    if (c.text == "") return;
    UserState user = state(context, 'user');
    VideoTextModel text = VideoTextModel(
      msg: c.text,
      token: user.info.memberToken,
      name: user.info.memberNickname,
      head: user.info.memberHead,
    );
    Global.ws.sendVideoMessage(widget.targetToken, text.msg);
    focus.unfocus();
    BlocProvider.of<LiveEmojiBloc>(context).add(LiveEmojiHide());
    BlocProvider.of<DialogueBloc>(context).add(AddDialogue(text));
    c.text = "";
  }

  @override
  void initState() { 
    super.initState();
    focus.addListener(() {
      BlocProvider.of<LiveEmojiBloc>(context).add(LiveEmojiHide());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          // emoji
          BlocBuilder<LiveEmojiBloc, bool>(
            builder: (context, state) {
              return Emoji.widget(
                context,
                (String emoji) {
                  print(emoji);
                  String val = "${c.text}$emoji";
                  c.text = val;
                  c.selection = TextSelection.collapsed(
                    offset: val.length,
                  );
                },
                show: state,
              );
            },
          ),
          // 聊天框
          Container(
            width: px(690),
            height: px(76),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(px(38)),
              color: col("04040f").withOpacity(.4),
            ),
            child: Row(
              children: <Widget>[
                // 消息输入框
                inputText(),
                // emoji按钮
                emojiBtn(context),
                // |
                shu,
                // 发送按钮
                sendBtn(context),
              ],
            ),
          ),
        ],
      ),
    );
  }

  /// 消息输入框
  inputText() {
    return Expanded(
      child: Padding(
        padding: EdgeInsets.only(left: px(30)),
        child: CupertinoTextField(
          controller: c,
          focusNode: focus,
          placeholder: '请输入消息...',
          placeholderStyle: TextStyle(
            color: Colors.white.withOpacity(0.8),
            fontSize: px(28),
          ),
          style: TextStyle(
            color: Colors.white,
          ),
          decoration: BoxDecoration(
            border: null,
          ),
        ),
      ),
    );
  }

  /// emoji按钮
  Widget emojiBtn(context) {
    return Container(
      width: px(44),
      height: px(44),
      margin: EdgeInsets.symmetric(horizontal: px(20)),
      child: FlatButton(
        onPressed: () {
          BlocProvider.of<LiveEmojiBloc>(context).add(LiveEmojiToggle());
        },
        padding: EdgeInsets.zero,
        child: Image.asset(
          "assets/images/icon/smile.png",
          color: Colors.white,
        ),
      ),
    );
  }

  /// 竖直分割线
  final shu = Container(
    width: 1,
    height: px(42),
    color: Colors.white,
  );

  /// 发送按钮
  Widget sendBtn(context) {
    return Container(
      width: px(113),
      child: FlatButton(
        onPressed: send,
        padding: EdgeInsets.zero,
        child: Text(
          "发送",
          style: TextStyle(
            color: Colors.white,
            fontSize: px(28),
          ),
        ),
      ),
    );
  }
}
